<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<!-- Notifications -->
		<div class="notifications f f-a-c f-j-b">
			<div class="leftNotifications">Notifications</div>
			<div @click="setting" class="rigtNotifications f f-a-c">
				<img src="/src/assets/user/setting.png" class="setting" alt="" />
				Notifications setting
			</div>
		</div>
		<!-- Systematic -->
		<div class="systematic f f-a-c">
			<div :class="{ act: inds == 1 }" @click="qie(1)" class="tic hand">
				Systematic
				<div v-if="systematic.total > 0" class="num">{{ systematic.total }}</div>
			</div>
			<div :class="{ act: inds == 2 }" @click="qie(2)" class="order hand">
				Order
				<div v-if="order.total > 0" class="num">{{ order.total }}</div>
			</div>
			<div v-if="act != 2" :class="{ act: inds == 3 }" @click="qie(3)" class="collect hand">
				Favorite
				<div v-if="collect.total > 0" class="num">{{ collect.total }}</div>
			</div>
		</div>
		<div class="list">
			<div v-for="(item, index) in list" @click="canle(item)" :key="index" style="cursor: pointer" class="listItem f f-j-c f-d-c">
				<div class="content" :class="{ actText: item.readStatus }">{{ item.content }}</div>
				<div class="time" :class="{ actText: item.readStatus }">{{ getTimes(item.createTime) }}</div>
			</div>
			<div class="hand">
				<div class="example-pagination-block f f -a-c f-j-c">
					<el-pagination @size-change="sizeChange" :default-page-size="10" @current-change="currentChange" layout="prev, pager, next" :total="total" />
				</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { getTimes } from "@/utils/setting.js";
	import { GetUserMessages, UnreadStatisticsMessages, CancelStatusMessage } from "@/api/xpert.js";
	import { GetUserMessagess, UnreadStatisticsMessagess, CancelStatusMessages } from "@/api/knowClub/index.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { useRoute } from "vue-router";
	let statusTab = ref(1);
	let inds = ref(1);
	let pageNum = ref(1);
	let pageSize = ref(10);
	let route = useRoute();
	let total = ref(0);
	let order = ref({});
	let collect = ref({});
	let systematic = ref({});
	let Unread = ref([]);
	let list = ref([]);
	let act = route.query.act || 1; //2为买家，不展示
	let num = route.query.num || 1; //2为买家，不展示
	onMounted(async () => {
		await unreadStatistics();
		await messageList();
		window.addEventListener("scroll", handleScroll);
	});
	const messageList = async () => {
		if (num == 2) {
			// 代表是kc进来的
			let n = await GetUserMessagess({ pageNum: pageNum.value, pageSize: pageSize.value, type: inds.value == 1 ? 3 : inds.value == 2 ? 1 : 2 });
			list.value = n.data.list;
			total.value = n.data.total;
		} else {
			let n = await GetUserMessages({ pageNum: pageNum.value, pageSize: pageSize.value, type: inds.value == 1 ? 3 : inds.value == 2 ? 1 : 2 });
			list.value = n.data.list;
			total.value = n.data.total;
		}
	};
	// const
	const canle = async item => {
		if (num == 2) {
			let n = await CancelStatusMessages({
				notifyId: item.id
			});
			if (n.code == 200) {
				messageList();
				unreadStatistics();
			}
		} else {
			let n = await CancelStatusMessage({
				notifyId: item.id
			});
			if (n.code == 200) {
				messageList();
				unreadStatistics();
			}
		}
	};
	// 站内信未读统计
	const unreadStatistics = async () => {
		order.value = {};
		collect.value = {};
		systematic.value = {};
		let n = null;
		if (num == 2) {
			n = await UnreadStatisticsMessagess();
		} else {
			n = await UnreadStatisticsMessages();
		}
		n.data.forEach(item => {
			if (item.type == 1) {
				order.value = item;
			} else if (item.type == 2) {
				collect.value = item;
			} else if (item.type == 3) {
				systematic.value = item;
			}
		});
	};

	// 切换
	const qie = num => {
		pageNum.value = 1;
		inds.value = num;
		messageList();
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		pageNum.value = e;
		console.log(e, "1111111");
	};
	// 去设置
	const setting = () => {
		router.push({
			path: "/UseNotificationsSetting",
			query: {
				num: num || 1
			}
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
